import { Button, Form, Input, message } from 'antd';
import './login.css';
import { login } from '../interfaces';
import { Link, useNavigate } from 'react-router-dom';

interface LoginUser {
    username: string;
    password: string;
}


/* 
antd 的栅格系统一共分了 24 份
上面两个 Form.Item 是 label 4 份，wrapper 20 份。
下面两个 Form.Item 是 label 0 份，wrapper 24 份。 
*/
const layout1 = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 }
}

const layout2 = {
    labelCol: { span: 0 },
    wrapperCol: { span: 24 }
}



export function Login() {

    const navigate = useNavigate();
    //如果你的onFinish方法的逻辑并不复杂，或者它没有依赖任何props或state，那么使用useCallback可能并不是必要的。

    const onFinish = async (values: LoginUser) => {
        const res = await login(values.username, values.password)

        const { data } = res.data;
        if (res.status === 201 || res.status === 200) {
            message.success('登录成功');

            localStorage.setItem('access_token', data.accessToken);
            localStorage.setItem('refresh_token', data.refreshToken);
            localStorage.setItem('user_info', JSON.stringify(data.userInfo));

            setTimeout(() => {
                navigate('/');
            }, 100)
        } else {
            message.error(data || '系统繁忙，请稍后再试');
        }

    };



    // {...layout1}: 这是在将layout1对象中的所有属性（键值对）展开并传递给Form组件。这种语法被称为“解构赋值”。
    // onFinish={onFinish}: 这是一个属性设置。它指定了当表单完成（即用户填写完所有必填项并点击提交按钮）时要调用的函数。
    // colon 表示是否显示 label 后面的冒号 

    return <div id="login-container">
        <h1>会议室预订系统</h1>
        <Form {...layout1} onFinish={onFinish} colon={false} autoComplete="off" >

            <Form.Item label="用户名" name="username" rules={[{ required: true, message: '请输入用户名!' }]} >
                <Input />
            </Form.Item>


            <Form.Item label="密码" name="password" rules={[{ required: true, message: '请输入密码!' }]} >
                <Input.Password />
            </Form.Item>


            <Form.Item {...layout2} >
                <div className='links'>
                    <Link to='/register'>创建账号</Link>
                    <Link to='/update_password'>忘记密码</Link>
                </div>
            </Form.Item>


            <Form.Item {...layout2} >
                <Button className='btn' type="primary" htmlType="submit">
                    登录
                </Button>
            </Form.Item>

        </Form>
    </div>


}